import Taro from '@tarojs/taro';
import { MaterialIcons } from 'taro-icons';
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, Video, Textarea, Image } from '@tarojs/components';
import ImageLoader from '../../components/ImageLoader';

import { IMAGE_BASE_URL } from '../../utils/common';
import { userLoginLimit } from '../../contexts/store';

import './index.scss';

/**
 * AI教练页面组件
 * 提供AI智能助手功能，帮助用户学习驾驶知识
 */
const AIServerPage: React.FC = () => {
  // 聊天消息状态
  const [messages, setMessages] = useState<Array<{
    id: string;
    content: string;
    sender: 'user' | 'ai';
    timestamp: number;
  }>>([]);

  // 输入框内容状态
  const [inputValue, setInputValue] = useState('');

  // 组件挂载时初始化欢迎消息
  useEffect(() => {
    if(!userLoginLimit()) return;
  
    const welcomeMessage = {
      id: `msg-${Date.now()}`,
      content: '你好！我是你的AI驾驶教练助手。有什么驾驶相关的问题可以问我，或者需要帮助练习科目一、科目四的题目吗？',
      sender: 'ai',
      timestamp: Date.now()
    };
    
    setMessages([welcomeMessage]);
  }, []);
  
  // 发送消息处理函数
  const handleSendMessage = () => {
    if (!inputValue.trim()) return;
    // 清空输入框
    setInputValue('');
    // 使用Taro的showModal API显示弹窗提示
    Taro.showModal({
      title: '提示',
      content: '功能逐步开放中...',
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
        }
      }
    });
  };
  
  
  return (
    <View className="page-container ai-server-page">
      {/* 背景视频 */}
      <View className="ai-server-video-background">
        <Video
          src={`${IMAGE_BASE_URL}/public/videos/ai.mp4`}
          autoplay
          muted
          loop
          controls={false}
          objectFit="cover"
        />
      </View>
      
      {/* 页面头部 */}
      <View className="ai-server-header">
        <Text className="ai-server-title">AI智能教练</Text>
        <Text className="ai-server-subtitle">随时随地解答你的驾驶疑问</Text>
      </View>
      
      {/* 聊天内容区域 */}
      <ScrollView 
        className="ai-server-chat-container" 
        scrollY 
        style={{ flex: 1 }}
      >
        {messages.map(message => (
          <View key={message.id} className="ai-server-message-group">
            <View className={`ai-server-message-item ${message.sender === 'ai' ? 'ai-message-wrapper' : 'user-message-wrapper'}`}>
              {message.sender === 'ai' && (
                <View className="ai-server-message-avatar">
                  <Image
                    className="ai-server-avatar-small" 
                    src={`${IMAGE_BASE_URL}/public/images/ai.png`}
                    mode="aspectFill"
                  />
                </View>
              )}
              
              <View className="ai-server-message-content-wrapper">
                <View className="ai-server-message-username">
                  <Text className="ai-server-username-text">
                    {message.sender === 'ai' ? 'AI智能教练' : '我'}
                  </Text>
                </View>
                
                <View className={`ai-server-message-bubble ${message.sender === 'ai' ? 'ai-message' : 'user-message'}`}>
                  <Text className="ai-server-message-text">{message.content}</Text>
                </View>
                
                <View className="ai-server-message-time">
                  <Text className="ai-server-time-text">
                    {new Date(message.timestamp).toLocaleTimeString('zh-CN', { 
                      hour12: false, 
                      hour: '2-digit', 
                      minute: '2-digit' 
                    })}
                  </Text>
                </View>
              </View>
              
              {message.sender !== 'ai' && (
                <View className="ai-server-message-avatar">
                  <View className="ai-server-avatar-small">
                    <Text>👤</Text>
                  </View>
                </View>
              )}
            </View>
          </View>
        ))}
      </ScrollView>
      
      {/* 输入区域 */}
      <View className="ai-server-input-container">
        <View className="ai-server-input-wrapper">
          <Textarea 
            className="ai-server-textarea"
            value={inputValue}
            onInput={e => setInputValue(e.detail.value)}
            placeholder="请输入你的问题..."
            autoHeight={true}
          />
        </View>
        <View 
          className={`ai-server-send-button ${!inputValue.trim() ? 'disabled' : ''}`}
          onClick={handleSendMessage}
          style={{ pointerEvents: !inputValue.trim() ? 'none' : 'auto' }}
        >
          <MaterialIcons name="send" color="#fff" size={20} />
          <Text className="ai-server-send-text">发送</Text>
        </View>
      </View>
    </View>
  );
};

export default AIServerPage;